<template>
  <div class="app-container">
    <div class="left">
      <span class="label-titile">开通课程</span>
      <el-input
        v-model="page.courseName"
        placeholder="请输入课程名字"
        style="width:200px"
        @keyup.enter.native="search"
      ></el-input>
      <span class="label-titile">开通人手机号</span>
      <el-input
        v-model="page.mobile"
        placeholder="请输入手机号"
        style="width:200px"
        @keyup.enter.native="search"
      ></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="courseName" label="课程名称"></el-table-column>
      <el-table-column prop="realName" label="开通人姓名"></el-table-column>
      <el-table-column prop="mobile" label="开通人手机号"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="authTime" label="到期时间" width="200"></el-table-column>
    </el-table>
    <el-row>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalResultSize"
        :current-page="page.currentPage"
        :page-count="totalPageSize"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getComanyId } from "@/utils/auth";
import { cardCourseList } from "@/api/company";
export default {
  name: "card",
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        companyId: "",
        courseName: "",
        mobile: ""
      },
      totalPageSize: 0,
      totalResultSize: 0
    };
  },
  created() {
    this.page.companyId = getComanyId();
    this.orderDetailList(this.page);
  },
  methods: {
    orderDetailList(data) {
      cardCourseList(data).then(res => {
        let entity = res.entity;
        this.list = [...entity.data];
        this.totalPageSize = entity.page.totalPageSize;
        this.totalResultSize = entity.page.totalResultSize;
      });
    },
    search() {
      this.orderDetailList(this.page);
      this.page.currentPage = 1;
      this.page.pageSize = 10;
    },
    handleSizeChange(val) {
      this.page["pageSize"] = val;
      this.page.currentPage = 1;
      this.orderDetailList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.orderDetailList(this.page);
    }
  }
};
</script>

<style>
</style>